<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="page-title">{{ isEdit ? '编辑工程款' : '添加工程款' }}</text>
		</view>

		<!-- 基本信息 -->
		<view class="form-section">
			<text class="section-title">基本信息</text>
			
			<view class="form-item">
				<text class="form-label">客户姓名</text>
				<input class="form-input" type="text" v-model="formData.customer" placeholder="请输入客户姓名" />
			</view>
			
			<view class="form-item">
				<text class="form-label">联系电话</text>
				<input class="form-input" type="number" v-model="formData.phone" placeholder="请输入联系电话" />
			</view>
		</view>

		<!-- 项目信息 -->
		<view class="form-section">
			<text class="section-title">项目信息</text>
			
			<view class="form-item">
				<text class="form-label">小区名称</text>
				<input class="form-input" type="text" v-model="formData.community" placeholder="请输入小区名称" />
			</view>
			
			<view class="form-item">
				<text class="form-label">房间信息</text>
				<input class="form-input" type="text" v-model="formData.room" placeholder="例如：1栋2单元301室" />
			</view>
		</view>

		<!-- 装修项目 -->
		<view class="form-section">
			<text class="section-title">装修项目</text>
			<view class="project-items">
				<view v-for="(item, index) in formData.items" :key="index" class="project-item">
					<view class="item-header">
						<text class="item-title">项目 {{ index + 1 }}</text>
						<button class="remove-btn" @click="removeItem(index)" v-if="formData.items.length > 1">删除</button>
					</view>
					<view class="item-content">
						<view class="item-row">
							<text class="item-label">项目类型</text>
							<picker class="item-picker" :value="item.typeIndex" :range="projectTypes" @change="onTypeChange($event, index)">
								<view class="picker-text">{{ projectTypes[item.typeIndex] }}</view>
							</picker>
						</view>
						<view class="item-row">
							<text class="item-label">金额</text>
							<input class="item-input" type="digit" v-model="item.amount" placeholder="0.00" />
						</view>
						<view class="item-row">
							<text class="item-label">备注</text>
							<input class="item-input" type="text" v-model="item.remark" placeholder="项目备注" />
						</view>
					</view>
				</view>
			</view>
			<button class="add-item-btn" @click="addItem">+ 添加项目</button>
		</view>

		<!-- 总金额 -->
		<view class="total-section">
			<text class="total-label">总金额</text>
			<text class="total-amount">¥{{ totalAmount }}</text>
		</view>

		<!-- 备注 -->
		<view class="form-section">
			<text class="section-title">备注</text>
			<textarea class="remark-textarea" v-model="formData.remark" placeholder="添加备注信息..." maxlength="200" />
		</view>

		<!-- 保存按钮 -->
		<view class="save-section">
			<button class="save-btn" @click="saveProject" :disabled="!canSave">{{ isEdit ? '更新' : '保存' }}</button>
		</view>
	</view>
</template>

<script>
import inputMixin from '@/utils/input-mixin.js'

export default {
	mixins: [inputMixin],
	data() {
		return {
			isEdit: false,
			editId: '',
			formData: {
				customer: '',
				phone: '',
				community: '',
				room: '',
				items: [
					{
						typeIndex: 0,
						amount: '',
						remark: ''
					}
				],
				remark: ''
			},
			projectTypes: [
				'天花板装修',
				'墙壁装修',
				'卫生间装修',
				'厨房装修',
				'地板装修',
				'门窗装修',
				'水电安装',
				'其他项目'
			]
		}
	},
	computed: {
		totalAmount() {
			return this.formData.items.reduce((sum, item) => {
				return sum + (parseFloat(item.amount) || 0)
			}, 0).toFixed(2)
		},
		canSave() {
			return this.formData.customer && 
				   this.formData.community && 
				   this.formData.room && 
				   this.formData.items.some(item => parseFloat(item.amount) > 0)
		}
	},
	onLoad(options) {
		if (options.id) {
			this.isEdit = true
			this.editId = options.id
			this.loadProject(options.id)
		}
	},
	methods: {
		loadProject(id) {
			const projects = uni.getStorageSync('engineering_projects') || []
			const project = projects.find(p => p.id === id)
			if (project) {
				this.formData = { ...project }
			}
		},
		addItem() {
			this.formData.items.push({
				typeIndex: 0,
				amount: '',
				remark: ''
			})
		},
		removeItem(index) {
			this.formData.items.splice(index, 1)
		},
		onTypeChange(e, index) {
			this.formData.items[index].typeIndex = e.detail.value
		},
		saveProject() {
			if (!this.canSave) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				})
				return
			}

			const project = {
				...this.formData,
				totalAmount: parseFloat(this.totalAmount),
				status: this.isEdit ? (this.formData.status || 'unpaid') : 'unpaid',
				createTime: this.isEdit ? this.formData.createTime : new Date().toISOString(),
				updateTime: new Date().toISOString()
			}

			if (!this.isEdit) {
				project.id = Date.now().toString()
			}

			// 保存到存储
			const projects = uni.getStorageSync('engineering_projects') || []
			
			if (this.isEdit) {
				const index = projects.findIndex(p => p.id === this.editId)
				if (index !== -1) {
					projects[index] = project
				}
			} else {
				projects.push(project)
			}

			uni.setStorageSync('engineering_projects', projects)

			uni.showToast({
				title: this.isEdit ? '更新成功' : '添加成功',
				icon: 'success'
			})

			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	}
}
</script>

<style scoped>
.container {
	background: #f5f5f5;
	min-height: 100vh;
	padding: 20rpx;
}

.page-header {
	text-align: center;
	padding: 40rpx 0;
}

.page-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.form-section {
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
	display: block;
}

.form-item {
	margin-bottom: 30rpx;
}

.form-item:last-child {
	margin-bottom: 0;
}

.form-label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
	display: block;
}

.form-input {
	width: 100%;
	padding: 20rpx;
	border: 2rpx solid #f0f0f0;
	border-radius: 12rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	background-color: #fff !important;
	color: #333 !important;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	user-select: text !important;
	-webkit-user-select: text !important;
	-webkit-touch-callout: default;
	-webkit-tap-highlight-color: transparent;
	caret-color: #667eea;
	z-index: 1;
	position: relative;
	height: auto;
	min-height: 68rpx;
	vertical-align: middle;
}

.project-items {
	margin-bottom: 30rpx;
}

.project-item {
	border: 2rpx solid #f0f0f0;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.item-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.remove-btn {
	padding: 8rpx 16rpx;
	background: #ff4757;
	color: white;
	border: none;
	border-radius: 8rpx;
	font-size: 24rpx;
}

.item-content {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.item-row {
	display: flex;
	align-items: center;
}

.item-label {
	font-size: 26rpx;
	color: #666;
	width: 120rpx;
}

.item-picker {
	flex: 1;
}

.picker-text {
	padding: 16rpx;
	border: 2rpx solid #f0f0f0;
	border-radius: 8rpx;
	font-size: 26rpx;
	color: #333;
}

.item-input {
	flex: 1;
	padding: 16rpx;
	border: 2rpx solid #f0f0f0;
	border-radius: 8rpx;
	font-size: 26rpx;
	background-color: #fff !important;
	color: #333 !important;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	user-select: text !important;
	-webkit-user-select: text !important;
	-webkit-touch-callout: default;
	-webkit-tap-highlight-color: transparent;
	caret-color: #667eea;
	z-index: 1;
	position: relative;
	height: auto;
	min-height: 58rpx;
	vertical-align: middle;
}

.add-item-btn {
	width: 100%;
	padding: 20rpx;
	background: rgba(102, 126, 234, 0.1);
	color: #667eea;
	border: 2rpx dashed #667eea;
	border-radius: 12rpx;
	font-size: 28rpx;
}

.total-section {
	background: linear-gradient(135deg, #667eea, #764ba2);
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
}

.total-label {
	font-size: 32rpx;
	color: white;
	font-weight: bold;
}

.total-amount {
	font-size: 48rpx;
	color: white;
	font-weight: bold;
}

.remark-textarea {
	width: 100%;
	padding: 20rpx;
	border: 2rpx solid #f0f0f0;
	border-radius: 12rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	min-height: 120rpx;
	background-color: #fff !important;
	color: #333 !important;
	line-height: 1.4;
	resize: none;
	-webkit-appearance: none;
	appearance: none;
	user-select: text !important;
	-webkit-user-select: text !important;
	-webkit-touch-callout: default;
	-webkit-tap-highlight-color: transparent;
	caret-color: #667eea;
	z-index: 1;
	position: relative;
	vertical-align: top;
}

.save-section {
	padding: 40rpx 0;
}

.save-btn {
	width: 100%;
	padding: 30rpx;
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	border: none;
	border-radius: 16rpx;
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
}

.save-btn:disabled {
	background: #ccc;
	box-shadow: none;
}
</style>
